<template>
  <div class="order_success">
    <div class="order_box">
      <div class="tt_box">
        <div class="icon" :class="[this.key == 1 ? 'sc' : 'fa']">
          <van-icon name="success" v-if="this.key == 1" />
          <van-icon name="cross" v-else />
        </div>

        <div class="pay_success">
          {{ this.key == 1 ? "支付成功" : "订单创建成功" }}
        </div>

        <ul class="main">
          <li class="item">
            <div class="left">订单编号</div>
            <div class="right">{{ message.order_id }}</div>
          </li>
          <li class="item">
            <div class="left">下单时间</div>
            <div class="right">
              {{ message.add_time_y }}&nbsp;&nbsp;{{ message.add_time_h }}
            </div>
          </li>
          <li class="item">
            <div class="left">支付方式</div>
            <div class="right">{{ message._payType }}</div>
          </li>
          <li class="item">
            <div class="left">支付金额</div>
            <div class="right">{{ message.pay_price }}</div>
          </li>
        </ul>

        <div class="btns">
          <div class="check" @click="goOrderDetail(message.order_id)">
            {{ this.key == 1 ? "查看订单" : "查看支付结果" }}
          </div>
          <div class="gohome" @click="goHome">
            {{ this.key == 1 ? "返回首页" : "支付失败重新支付" }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      key: "",
      order_id: "",
      message: {},
    };
  },
  created() {
    this.order_id = this.$route.params.id;
    this.key = this.$route.params.key;

    if (this.$route.query.msg) {
      if (this.$route.query.msg.includes("余额不足")) {
        this.$toast.show("余额不足", 1000);
      } else if (this.$route.query.msg.includes("错误")) {
        this.$loadtoast.show(this.$route.query.msg, 1000);
      }
    } else {
      this.$toast.show("支付成功 √", 1000);
    }

    console.log(this.$route);
    this.initData();
  },
  methods: {
    initData() {
      let url = `/api/order/detail/${this.order_id}`;
      let token = localStorage.getItem("token");

      let pro = axios({
        method: "get",
        url: url,
        headers: {
          "Authori-zation": "Bearer " + token,
        },
      })
        .then((res) => {
          console.log("获取成功", res.data);
          let { status, data } = res.data;
          if (status == 200) {
            let obj = {
              id: data.id,
              order_id: data.order_id,
              add_time_h: data.add_time_h,
              add_time_y: data.add_time_y,
              _payType: data._status._payType,
              pay_price: data.pay_price,
            };

            this.message = obj;
          }
        })
        .catch((err) => {
          console.log("数据失败");
        });
    },

    goOrderDetail(id) {
      this.$router.push("/order/detail/" + id);
    },
    goHome() {
      if (this.key == 1) {
        this.$router.push("/index");
      } else {
        this.$router.push("/order/detail/" + this.order_id);
      }
    },

    goBack() {
      this.$router.go(-2);
    },
  },

  mounted() {
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL);
      window.addEventListener("popstate", this.goBack, false);
    }
  },
  destroyed() {
    window.removeEventListener("popstate", this.goBack, false);
  },
};
</script>

<style lang="scss" scoped>
.order_box {
  margin-top: 100px;
  padding: 0 15px;
  .tt_box {
    position: relative;
    border-radius: 8px;
    background-color: #fff;
    padding: 40px 12px 0;
    .icon {
      width: 70px;
      height: 70px;
      // background-color: #fc4141;
      color: #fff;
      font-size: 46px;
      text-align: center;
      line-height: 70px;
      border-radius: 50%;
      position: absolute;
      top: -35px;
      left: 50%;
      margin-left: -35px;
    }
    .icon.sc {
      background-color: #fc4141;
    }
    .icon.fa {
      background-color: #999;
    }
    .pay_success {
      height: 60px;
      line-height: 60px;
      text-align: center;
      font-size: 16px;
      font-weight: 700;
      color: #333;
    }
    .main {
      border-top: 1px solid #eeee;
      border-bottom: 1px solid #eeee;
      padding: 15px 0;

      .item {
        height: 43px;
        font-size: 14px;
        color: #282828;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
        }

        .right {
          color: #666;
        }
      }
    }

    .btns {
      padding: 25px 0;
      .check,
      .gohome {
        height: 43px;
        line-height: 43px;
        border: 1px solid #fc4141;

        text-align: center;
        font-size: 15px;
        border-radius: 21.5px;
      }
      .check {
        color: #fff;
        background-color: #fc4141;
      }
      .gohome {
        margin-top: 10px;
        color: #fc4141;
      }
    }
  }
}
</style>

